<template>
	<view>
		<skeleton :show="showSkeleton" :isNodes="isNodes" ref="skeleton" loading="chiaroscuro" selector="skeleton"
			bgcolor="#FFF"></skeleton>
		<view class="new-users skeleton" :style="{visibility: showSkeleton ? 'hidden' : 'visible'}">
			<view class="head">
				<view class="user-card">
					<view class="bg"></view>
					<view class="user-info">
						<image class="avatar skeleton-radius"
							:src="userInfo.avatar ? userInfo.avatar : '/static/images/f.png'" mode="aspectFill"
							@click="goEdit"></image>
						<view class="info">
							<view class="name" v-if="!userInfo.id" @click="openAuto">
								请点击授权
							</view>
							<view class="phone" v-if="userInfo.id">{{userInfo.user_nickname}}</view>
							<view class="num" v-if="userInfo.id" @click="goEdit()">
								<view class="num-txt">ID：{{userInfo.id}}</view>
							</view>
						</view>
					</view>
					
				</view>
			</view>
			<view class="wrapper">

				<!-- 收藏、关注 -->
				<view class="col-fol-box skeleton-rect">
					<view class="cf-item" v-for="(item,index) in colFols" @click="clickColFol(item)">
						<view class="num">{{item.num}}</view>
						<view class="title">{{item.title}}</view>
					</view>
				</view>
				<!-- 功能菜单区【挂号、问诊】 -->
				<view class="fun-menus-box skeleton-rect">
					<view class="m-item" v-for="(item,index) in menus" @click="clickMenus(item)">
						<view class="icon">
							<image :src="item.img" mode="aspectFit"></image>
							<text class="user-asknum" v-if="item.num>0">{{item.num}}</text>
						</view>
						<view class="title">{{item.title}}</view>
					</view>
				</view>
			</view>
			<view class="study-list" v-if="userInfo">
				<view v-for="(item,index) in userInfo.two" @click="mylist(item.id,item.href)">
					<view class="row">
						<image class="study-image" :src="item.thumb"></image>
						<view class="study-name">{{item.name}}</view>
						<text class="iconfont icon-xiangyou"></text>
					</view>
				</view>
			</view>
			<view style="height: 50rpx;"></view>

			<authorize @onLoadFun="onLoadFun" :isAuto="isAuto" :isShowAuth="isShowAuth" @authColse="authColse"
				:isGoIndex="false"></authorize>
			
		</view>
	</view>

</template>
<script>
	import {
		getMenuList,
		getUserInfo,
		setVisit
	} from '@/api/user.js';
	
	import {
		mapGetters
	} from "vuex";
	import authorize from '@/components/Authorize';
	
	
	import {
		HTTP_REQUEST_URL
	} from '@/config/app';
	const app = getApp();
	import {
		getCollectNums
	} from '@/api/inquiry.js'
	export default {
		components: {
			
			authorize
		},
		
		data() {
			return {
				domain: HTTP_REQUEST_URL,
				showSkeleton: true, //骨架屏显示隐藏
				isNodes: 0, //控制什么时候开始抓取元素节点,只要数值改变就重新抓取
				doctorImg: {
					ask: HTTP_REQUEST_URL + '/uni_static/u/udoc_ask.png',
					reg: HTTP_REQUEST_URL + '/uni_static/u/udoc_reg.png',
				},
				colFols: [{
					'id': 0,
					'title': '收藏的内容',
					'num': '0',
					'url': '/pages/shops/subs_user/collection/index'
				}, {
					'id': 1,
					'title': '关注的医生',
					'num': '0',
					'url': '/pages/shops/subs_user/follow/index'
				}],
				menus: [{
						'id': 0,
						'title': '我的挂号',
						'num': 0,
						'img': HTTP_REQUEST_URL + '/uni_static/h/um_register.png',
						'url': '/pages/shops/subs_appointment/record/index'
					},
					{
						'id': 2,
						'title': '我的问诊',
						'num': 0,
						'img': HTTP_REQUEST_URL + '/uni_static/h/um_inquiry.png',
						'url': '/pages/shops/subs_inquiry/record/picTextList'
					}
				],
				isAuto: false, //没有授权的不会自动授权
				isShowAuth: false, //是否隐藏授权
				userInfo: {
					
				},
				is_show: 0,
				isLogin:false

			}
		},
		onLoad() {
			
			setTimeout(() => {
				this.showSkeleton = false

			}, 500)


		},
		onReady() {
			this.isNodes++;
		},
		mounted: function() {},
		onShow: function() {
			let that = this;
			let user = uni.getStorageSync('userinfo')
			if (user && user.id>0) {
				this.isShowAuth = false
				this.isLogin = true
				this.getUserInfo();
			} else {
				this.isLogin = false
				this.userInfo = {}
			}
		},
		methods: {
			
			mylist(ID, href) {
				//console.log(ID,href)
				if(ID == 3){//协议规则
					uni.navigateTo({
						url: '/pages/users/user_setting/index'
					})
				}else if(href){
					uni.navigateTo({
						url:'/pages/webview/webview?url=' + href
					})
				}
			},
			// 打开授权
			openAuto() {
				this.isAuto = true;
				this.isShowAuth = true
			},
			// 授权回调
			onLoadFun() {
				this.isShowAuth = false
			},
			
			// 授权关闭
			authColse: function(e) {
				this.isShowAuth = e
			},
			
			/**
			 * 获取个人用户信息
			 */
			getUserInfo: function() {
				let that = this;
				getUserInfo().then(res => {
					that.userInfo = res.data.info[0],
					that.colFols[0].num = that.userInfo.text_count + that.userInfo.video_count
					that.colFols[1].num = that.userInfo.doctor_count
				});
			},
			// 编辑页面
			goEdit() {
				if (this.isLogin) {
					uni.navigateTo({
						url: '/pages/users/user_info/index'
					})
				} else {
					this.openAuto()
				}
			},
			
			/**
			 * 关注-收藏
			 */
			clickColFol(item) {
				console.log('rk==>[col-fol]' + JSON.stringify(item.id));
				if (!item.url || item.url.length <= 0) {
					return this.$util.Tips({
						title: '链接不合法'
					});
				}

				if (!this.isLogin) {
					this.openAuto()
					return
				}
				uni.navigateTo({
					url: item.url
				})
			},
			/**
			 * 菜单
			 */
			clickMenus(item) {
				if (!this.isLogin) {
					this.openAuto()
					return
				}
				uni.navigateTo({
					url: item.url
				})
			}

		}
	}
</script>

<style lang="scss">
	.study-list {
		display: flex;
		flex-direction: column;
		margin: 20rpx;
		width: calc(100% - 30rpx);
		background-color: #fff;
		border-radius: 24rpx;
	}

	.row {
		margin-left: 30rpx;
		margin-right: 30rpx;
		display: flex;
		height: 55px;
		flex-direction: row;
		align-items: center;
		background-color: #fff;
	}

	.study-name {
		display: flex;
		flex: 1;
		flex-direction: row;
		margin-left: 20rpx;
		margin-right: 40rpx;
		color: #323232;
		font-size: 30rpx;
	}

	.study-image {
		width: 40rpx;
		height: 40rpx;
	}

	.new-users {
		.head {
			background: #fff;

			.user-card {
				position: relative;
				width: 100%;
				padding: 35rpx 0 35rpx;
				// background-image: linear-gradient(90deg, var(--view-bntColor21) 0%, var(--view-bntColor22) 100%);
				background-color: #fff;

				.bg {
					position: absolute;
					left: 0;
					top: 0;
					width: 100%;
					height: 100%;
					// background-image: url('~@/static/images/user_bg.png');
					background-size: 100% 100%;
				}

				.user-info {
					z-index: 20;
					position: relative;
					display: flex;
					padding: 0 28rpx;

					.level_icon {
						width: 34rpx;
						height: 32rpx;
						margin: 4rpx 0 0 6rpx;
						border: none;
					}

					.avatar {
						width: 120rpx;
						height: 120rpx;
						border-radius: 50%;
					}

					.info {
						flex: 1;
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						margin-left: 20rpx;
						padding: 15rpx 0;

						.name {
							display: flex;
							align-items: center;
							color: #323232;
							font-size: 31rpx;

							.vip {
								display: flex;
								align-items: center;
								height: 36rpx;
								padding: 0 20rpx;
								background: rgba(0, 0, 0, 0.2);
								border-radius: 18px;
								font-size: 20rpx;
								margin-left: 12rpx;

								image {
									width: 27rpx;
									height: 27rpx;
								}
							}
						}

						.num {
							display: flex;
							align-items: center;
							font-size: 26rpx;
							color: #323232;

							image {
								width: 22rpx;
								height: 23rpx;
								margin-left: 20rpx;
							}
						}
					}
				}

				.num-wrapper {
					z-index: 30;
					position: relative;
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin: 30rpx 20rpx 0;
					color: #323232;

					.num-item {
						width: 25%;
						text-align: center;

						.num {
							font-size: 42rpx;
							font-weight: bold;
						}

						.txt {
							margin-top: 8rpx;
							font-size: 22rpx;
							color: rgba(255, 255, 255, 0.6);
						}
					}
				}

				.sign {
					z-index: 200;
					position: absolute;
					right: -12rpx;
					top: 80rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					width: 120rpx;
					height: 60rpx;
					background: linear-gradient(90deg, rgba(255, 225, 87, 1) 0%, rgba(238, 193, 15, 1) 100%);
					border-radius: 29rpx 4rpx 4rpx 29rpx;
					color: #282828;
					font-size: 28rpx;
					font-weight: bold;
				}
			}
		}

		.wrapper {
			position: relative;
			//top: -44rpx;
			top: 0rpx;
			padding: 0 20rpx;
		}

		.order-wrapper {
			margin-top: 20rpx;
			background-color: #fff;
			border-radius: 12rpx;

			.order-hd {
				height: 80rpx;
				align-items: center;
				justify-content: space-between;
				border-bottom: 1px dashed #DDDDDD;
				padding: 0 30rpx;
				font-size: 30rpx;
				color: #282828;

				.right {
					align-items: center;
					color: #666666;
					font-size: 26rpx;

					.icon-xiangyou {
						margin-left: 5rpx;
						margin-top: 6rpx;
						font-size: 26rpx;
					}
				}
			}

			.order-bd {
				display: flex;

				.order-item {
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					width: 20%;
					height: 160rpx;

					.pic {
						position: relative;
						text-align: center;

						image {
							width: 56rpx;
							height: 56rpx;
						}
					}

					.txt {
						margin-top: 8rpx;
						font-size: 26rpx;
						color: #454545;
					}
				}
			}
		}

		.slider-wrapper {
			margin: 20rpx 0;
			height: 130rpx;

			swiper,
			swiper-item {
				height: 100%;
			}

			image {
				width: 100%;
				height: 130rpx;
			}
		}

		.user-menus {
			padding-bottom: 30rpx;
			background-color: #fff;
			border-radius: 16rpx;

			.title {
				height: 80rpx;
				line-height: 80rpx;
				padding: 0 30rpx;
				border-bottom: 1px dashed #DDDDDD;
				font-weight: bold;
			}

			.item {
				position: relative;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: space-between;
				width: 25%;
				line-height: 28rpx;
				height: 90rpx;
				margin-top: 30rpx;
				text-align: center;

				.item-count {
					display: flex;
					flex-direction: column;
					align-items: center;
					width: 100%;
				}

				image {
					width: 52rpx;
					height: 52rpx;
				}

				.skeleton_image {
					width: 80rpx;
					height: 80rpx;
				}

				text {
					margin-top: 10rpx;
					font-size: 26rpx;
					color: #282828;
					text-overflow: ellipsis;
					overflow: hidden;
					white-space: nowrap;
					width: 78%;
				}

				&:last-child::before {
					display: none;
				}
			}

			button {
				font-size: 28rpx;
			}
		}

		.phone {
			color: #323232;
		}

		.order-status-num {
			min-width: 15px;
			height: 15px;
			text-align: center;
			background-color: #fff;
			color: var(--view-theme);
			border-radius: 15px;
			position: absolute;
			right: -14rpx;
			top: -15rpx;
			font-size: 20rpx;
			padding: 0 8rpx;
			border: 1px solid var(--view-theme);
		}
	}

	.col-fol-box {
		background-color: #fff;
		border-radius: 12rpx;
		padding: 30rpx 0;
		margin: 20rpx 0;
		display: flex;
		align-items: center;
		width: 100%;

		.cf-item {
			width: 50%;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			font-size: $yy-title-font;

			.num {
				font-weight: bold;
				margin-bottom: 10rpx;
			}

		}
	}

	.fun-menus-box {
		display: flex;
		justify-content: space-between;
		width: 100%;

		.m-item {
			width: 48%;
			height: 140rpx;
			display: flex;
			border-radius: 12rpx;
			background-color: #fff;
			flex-direction: row;
			align-items: center;
			justify-content: center;
			font-size: $yy-title-font;
		}

		.icon {
			width: 70rpx;
			height: 70rpx;
			margin-right: 20rpx;

			image {
				width: 100%;
				height: 100%;
			}

			position: relative;

			.user-asknum {
				min-width: 15px;
				height: 15px;
				text-align: center;
				background-color: #fff;
				color: var(--view-theme);
				border-radius: 15px;
				position: absolute;
				// right: -10rpx;
				top: -10rpx;
				font-size: 20rpx;
				padding: 0 8rpx;
				border: 1px solid var(--view-theme);

			}
		}
	}

	.menus-list-item {
		background: #fff;
		border-radius: 12rpx;
		padding: 30rpx 50rpx 30rpx 40rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 20rpx;

		.title {
			font-size: 34rpx;
			color: #282828;
			font-weight: bold;
			display: flex;

			.t-box {
				position: relative;
			}

			.asknum {
				min-width: 15px;
				height: 15px;
				text-align: center;
				background-color: #fff;
				color: var(--view-theme);
				border-radius: 15px;
				position: absolute;
				// right: -20rpx;
				top: -10rpx;
				font-size: 20rpx;
				padding: 0 8rpx;
				border: 1px solid var(--view-theme);
			}

			.ask {
				color: $yy-main-col;
			}

			.reg {
				color: #8595FA;
			}

			.merchant {
				color: #E93323;
			}

			.plantform {
				color: #FFC552;
			}
		}

		.info {
			margin-top: 15rpx;
			color: #666666;
			font-size: 22rpx;
		}

		.item-img {
			width: 180rpx;
			height: 108rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.image {
			width: 180rpx;
			height: 108rpx;
			background-size: 100%;
			background-repeat: no-repeat;

			&.merchant-image {
				background-image: url('');
			}

			&.plantform-image {
				background-image: url('');
			}
		}
	}

</style>